<!--
  * 时间：2024/11/12
  * 作者：刘岩
  * 描述：产品展示模块
-->
<template>
  <div class="product">
    <banner></banner>
    <div class="container">
      <div class="title-bar">
        <span
          class="title"
          :class="{'title-active': titleActive === 1}"
          @click="titleToggle(1)"
        >
          荣誉作品
        </span>
        <span
          class="title"
          :class="{'title-active': titleActive === 2}"
          @click="titleToggle(2)"
        >
          经典案例
        </span>
      </div>
      <div class="content">
        <h1>{{ titleActive === 1 ? '荣誉作品' : '经典案例' }}</h1>
        <div class="content-box">
          <div
            class="car-box"
            v-for="(item, index) in carList"
            :key="index"
          >
            <div class="img-box">
              <img class="car-img" :src="item.imgSrc" alt="">
              <div class="car-modal">
                <div class="name">查看详情</div>
              </div>
            </div>
            <div class="car-title">{{ item.title }}</div>
            <div class="car-info">{{ item.info }}</div>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
export default {
  name: "Product",
  data () {
    return {
      titleActive: 1, // title选中参数
      carList: [
        {
          imgSrc: require('@/assets/banner/banner-1.jpg'),
          title: '“百年电信 红色传承” 中国电信业发展史陈列',
          info: '第十九届（2021年度）全国博物馆十大陈列展览优胜奖',
          routeName: ''
        },
        {
          imgSrc: require('@/assets/banner/banner-1.jpg'),
          title: '“百年电信 红色传承” 中国电信业发展史陈列',
          info: '第十九届（2021年度）全国博物馆十大陈列展览优胜奖',
          routeName: ''
        },
        {
          imgSrc: require('@/assets/banner/banner-1.jpg'),
          title: '“百年电信 红色传承” 中国电信业发展史陈列',
          info: '第十九届（2021年度）全国博物馆十大陈列展览优胜奖',
          routeName: ''
        },
        {
          imgSrc: require('@/assets/banner/banner-1.jpg'),
          title: '“百年电信 红色传承” 中国电信业发展史陈列',
          info: '第十九届（2021年度）全国博物馆十大陈列展览优胜奖',
          routeName: ''
        },
        {
          imgSrc: require('@/assets/banner/banner-1.jpg'),
          title: '“百年电信 红色传承” 中国电信业发展史陈列',
          info: '第十九届（2021年度）全国博物馆十大陈列展览优胜奖',
          routeName: ''
        }
      ]
    }
  },
  methods: {
    /**
     * 时间：2024/11/12
     * 作者：刘岩
     * 功能：切换标签
     */
    titleToggle(type) {
      this.titleActive = type;
    }
  }
}
</script>

<style scoped lang="less">
.product {
  width: 100%;
  .container {
    width: 100%;
    .title-bar {
      width: 100%;
      height: 80px;
      padding: 0 60px;
      text-align: left;
      border-bottom: 2px solid #e5e5e5;
      box-sizing: border-box;
      .title {
        width: 200px;
        height: 100%;
        line-height: 80px;
        display: inline-block;
        text-align: center;
        font-size: 18px;
        color: #000000;
        cursor: pointer;
      }
      .title-active {
        background: #b7070d;
        color: #ffffff;
      }
    }
    .content-box {
      width: 1800px;
      margin: 0 auto;
      //text-align: left;
      display: flex;
      flex-wrap: wrap;
      .car-box {
        width: 560px;
        margin: 0 20px 40px 20px;
        text-align: left;
        cursor: pointer;
        //transform: scale(1);
        //transition: transform 0.5s linear;
        &:hover {
          .car-img {
            transform: scale(1.4);
            transition: transform 0.5s linear;
          }
          //.car-modal {
          //  visibility: visible !important;
          //}
        }
        .img-box {
          position: relative;
          width: 100%;
          height: 350px;
          overflow: hidden;
          .car-img {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
          }
          .car-modal {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            background: rgba(183, 7, 13, 0.8);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            visibility: hidden;
            .name {
              color: #ffffff;
              font-size: 16px;
              font-weight: bold;
              cursor: pointer;
            }
          }
        }
        .car-title {
          font-size: 16px;
          font-weight: bold;
          padding: 15px 0;
          border-bottom: 1px solid #e5e5e5;
        }
        .car-info {
          font-size: 16px;
          padding: 15px 0;
        }
      }
    }
  }
}
</style>
